<template>
    <div>
        <el-form ref="form" label-width="80px">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
                    <el-form-item label="状态:">
                        <el-select v-model="searchStatus" placeholder="请选择" 
                            size="small" class="w140"
                        >
                            <el-option key="1" label="进行中" value="1">
                            </el-option>
                            <el-option key="2" label="已结束" value="2">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
                    <el-form-item class="teAliLeft">
                        <el-button type="primary" @click="cliScreen" size="small" class="mr5">
                            立即筛选
                        </el-button>
                        <el-button @click="cliEmpty" size="small">
                            清空
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-button size="small" type="success" @click="cliAddTask" class="mb5"
        >
            新增会员卡领取任务
        </el-button>
        <el-table :data="tempList1" border class="wPer100">
            <el-table-column prop="id" label="任务id" width="65">
            </el-table-column>
            <el-table-column label="状态" width="65">
                <template slot-scope="scope">
                    {{ 
                        scope.row.status == 1 ? '进行中' :
                        scope.row.status == 2 ? '已结束' : scope.row.status
                    }}
                </template>
            </el-table-column>
            <!-- <el-table-column label="类型/月或天" width="100">
                <template slot-scope="scope">
                    {{ 
                        scope.row.type == 1 ? '月' :
                        scope.row.type == 2 ? '天' : scope.row.type
                    }}
                </template>
            </el-table-column> -->
            <el-table-column label="加会员时长" width="95">
                <template slot-scope="scope">
                    <div v-if="scope.row.type == 1">
                        {{ scope.row.month }}月
                    </div>
                    <div v-if="scope.row.type == 2">
                        {{ scope.row.day }}天
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="count" label="每人可领取次数" width="120">
            </el-table-column>
            <el-table-column prop="count_log" label="已领取总次数" width="105">
            </el-table-column>
            <el-table-column prop="start_date" label="领取开始时间">
            </el-table-column>
            <el-table-column prop="end_date" label="领取结束时间">
            </el-table-column>
            <el-table-column prop="date" label="创建时间">
            </el-table-column>
            <el-table-column label="操作" width="105">
                <template slot-scope="scope">
                    <el-button @click="cliEndBtn(scope.row.id)"
                          size="mini" type="danger" v-if="scope.row.status == 1"
                        >
                            结束任务
                        </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="floRight mt30 pb40">
            <el-pagination :current-page="currentPage1" :total="total1"
                :page-sizes="[10]" :page-size="pageSize1"
                background layout="prev, pager, next, total, jumper"
                @current-change="handleCurrentChange1"
            />
        </div>
        <el-dialog :visible.sync="dialogFormVisible1" width="375px"
            title="新增会员卡领取任务"
        >
            <div class="mb14">
                <el-form label-width="120px" :model="distributorData1" status-icon
                    :rules="distributorRules1" ref="distributorData1"
                >
                    <el-form-item label="类型：">
                        <el-radio-group v-model="distributorData1.type"
                            @input="radioFun1"
                        >
                            <el-radio label="1">按月</el-radio>
                            <el-radio label="2">按天</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="加会员时长/月：" v-show="distributorData1.type == 1">
                        <el-input v-model="distributorData1.month" placeholder="任务持续几个月"
                            type="number" :min="0" size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="加会员时长/天：" v-show="distributorData1.type == 2">
                        <el-input v-model="distributorData1.day" placeholder="任务持续几天"
                            type="number" :min="0" size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="每人可领取次数:" prop="count">
                        <el-input v-model="distributorData1.count" placeholder="请输入每人可领取次数"
                            type="number" :min="0" size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="领取开始时间:">
                        <el-date-picker v-model="dateVal1" type="datetime"
                            placeholder="选择开始时间" size="small" @change="dateChange1"
                            :picker-options="pickerOptions1" :clearable="false"
                            style="width: 100%;"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="领取结束时间:">
                        <el-date-picker v-model="dateVal2" type="datetime"
                            placeholder="选择结束时间" size="small" @change="dateChange2"
                            :picker-options="pickerOptions2" :clearable="false"
                            style="width: 100%;"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="subDistributor1()"
                          size="small" type="primary"
                        >
                            提交
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getCardTasksList, createTasks, finishCardTasks } from '@s/api'
import timeFormat from "@u/timeFormat";
export default {
    data() {
        let countCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入每人可领取次数'));
          } else {
            callback();
          }
        };
        return {
            dialogFormVisible1: false,
            dateVal1: '', dateVal2: '',
            distributorData1: {
                type: '1', month: 1, day: 0, count: 1,
                start_date: '', end_date: ''
            },
            distributorRules1: {
                count: [{ validator: countCheck, trigger: 'blur' }]
            },
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() < new Date().setDate(new Date().getDate() - 1);//不可小于今天
                }
            },
            pickerOptions2: {
                disabledDate(time) {
                    return time.getTime() < new Date().setDate(new Date().getDate() - 1);//不可小于今天
                }
            },
            currentPage1: 1, pageSize1: 10, tempList1: [], total1: 0,
            searchStatus: '',
        }
    },
    mounted() {
        this.dateVal1 = new Date();
        this.distributorData1.start_date = timeFormat.formatTime(new Date());
        this.dateVal2 = new Date(new Date().getTime() + 1 * 1000 * 60 * 60 * 24);
        this.distributorData1.end_date = timeFormat.formatTime(new Date(new Date().getTime() + 1 * 1000 * 60 * 60 * 24));
        this.getDataList1();
    },
    methods: {
        cliAddTask() {
            this.dialogFormVisible1 = true;

        },
        radioFun1(eee) {
            if(eee == '1') {
                this.distributorData1.month = 1;
                this.distributorData1.day = 0;
            }else if(eee == '2') {
                this.distributorData1.month = 0;
                this.distributorData1.day = 1;
            }
        },
        getDataList1() {
            getCardTasksList({
                token: this.$store.getters.token,
                page: this.currentPage1 - 1,
                number: this.pageSize1,
                status: this.searchStatus
            }).then(res => {
                this.tempList1 = res.data.data;
                this.total1 = res.data.count;
            })
        },
        handleCurrentChange1(currentPage1) {
            this.currentPage1 = currentPage1;
            this.getDataList1();
        },
        dateChange1(dateVal1) {
            // console.log(22, timeFormat.formatTime(dateVal1));
            this.distributorData1.start_date = timeFormat.formatTime(dateVal1);
        },
        dateChange2(dateVal2) {
            this.distributorData1.end_date = timeFormat.formatTime(dateVal2);
        },
        subDistributor1() {
            this.$refs['distributorData1'].validate(valid => {
                if (valid) {
                    let postData = new FormData(); 
                    postData.append('token', this.$store.getters.token);
                    postData.append('month', this.distributorData1.month);
                    postData.append('day', this.distributorData1.day);
                    postData.append('type', this.distributorData1.type);
                    postData.append('start_date', this.distributorData1.start_date);
                    postData.append('end_date', this.distributorData1.end_date);
                    postData.append('count', this.distributorData1.count);
                    createTasks(postData).then(res => {
                        console.log(11, res);
                        this.dialogFormVisible1 = false;
                        this.$message({ type: "success", message: '新增成功' });
                        this.getDataList1();
                    })
                }
            })
        },
        cliScreen() {
            this.currentPage1 = 1;
            this.getDataList1();
        },
        cliEmpty() {
            this.searchStatus = '';
        },
        cliEndBtn(id) {
            this.$confirm('该操作不可撤销，确定结束任务？', '提示', {
              confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
            }).then(() => {
                let postData = new FormData(); 
                postData.append('token', this.$store.getters.token);
                postData.append('id', id);
                finishCardTasks(postData).then(res => {
                    this.$message({ type: "success", message: '结束成功' });
                    this.getDataList1();
                })
            }).catch(() => { });
        },

    }
}
</script>